<template>
  <div id="add-blog">
    <h2>添加博客</h2>
    <el-form action="" v-if="!submitted" :rules="addFormRules" :model="blog" ref="addFormRef">
      <el-form-item label="博客标题" prop="title">
        <el-input type="text" v-model="blog.title" required></el-input>
      </el-form-item>

      <el-form-item label="博客内容">
        <el-input type="textarea" v-model="blog.content" required rows="7"></el-input>
      </el-form-item>

      <label for="" style="font-size: 14px;color: #606266">所属前端分类</label>
      <el-checkbox-group v-model="blog.categories">
        <el-checkbox :label="item" v-for="item in categories" :key="item"></el-checkbox>
      </el-checkbox-group>

      <el-form-item label="作者： ">
        <el-select v-model="blog.author" placeholder="请选择">
          <el-option v-for="item in authors" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>


      <el-button @click.prevent="add">添加博客</el-button>
    </el-form>

    <div>
      <h3 v-if="submitted">您的博客发布成功</h3>
    </div>
    <div id="preview">
      <h3>博客总览</h3>
      <p>标题:{{blog.title}}</p>
      <p>内容:</p>
      <div v-text="blog.content" style="white-space: pre-wrap;word-wrap:break-word;"></div>
      <p>分类</p>
      <ul>
        <li v-for="category in blog.categories" :key="category">{{category}}</li>
      </ul>
      <p>作者:{{blog.author}}</p>
    </div>
  </div>
</template>

<script src="//cdn.jsdelivr.net/npm/leancloud-storage@4.0.0/dist/av-min.js"></script>
<script>
  import axios from 'axios'
  export default {
    // http://jsonplaceholder.typicode.com/
    // http://jsonplaceholder.typicode.com/posts
    name: 'addblog',
    data() {
      return {
        blog: {
          title: "",
          content: "",
          categories: [],
          author: ""
        },
        categories: ["vue.js", "es6", "network", "others"],
        authors: ["a", "b", "c"],
        submitted: false,
        addFormRules: {
          title: [{
            required: true,
            message: '请输入博客标题',
            trigger: 'blur'
          }],
        }
      }
    },
    methods: {
      add() {
        const baseUrl = 'https://m7mqr0oh.lc-cn-n1-shared.com/1.1/'
        const header = {
          'x-avoscloud-application-id': 'm7MqR0ohghp4q78bJ5L2EstT-gzGzoHsz',
          'x-avoscloud-session-token': 'm7MqR0ohghp4q78bJ5L2EstT-gzGzoHsz',
          'x-avoscloud-application-key': 'ETEgD3OphCkHtbozcXn8IPBt'
        }

        this.$refs.addFormRef.validate(async valid => {
          if (!valid) {
            return this.$message.error('请填写必要的表单项！')
          }

          await axios.post(baseUrl + "classes/blog", this.blog, {
              headers: header
            })
            .then((data) => {
              this.$router.push('/')
              this.submitted = true;
            })
        })
      }
    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #add-blog * {
    box-sizing: border-box;
  }

  #add-blog {
    margin: 0 auto;
    max-width: 600px;
    padding: 20px;
  }

  input[type="text"],
  textarea,
  select {
    display: block;
    width: 100%;
    padding-top: 0;
  }

  textarea {
    height: 200px;
  }

  #checkboxes label {
    display: inline-block;
    margin-right: 10px;
  }

  #checkboxes input {
    display: inline-block;
    margin-right: 40px;
  }


  button {
    display: block;
    margin: 20px 0;
    background: rgb(251, 114, 153);
    color: #fff;
    border: 0;
    padding: 14px;
    border-radius: 4px;
    font-size: 18px;
    cursor: pointer;
  }

  #preview {
    padding: 10px 20px;
    border: 1px dotted #ccc;
    margin: 30px 0;
  }

  h3 {
    margin-top: 10px;
  }

  textarea.el-textarea__inner {
    height: 200px !important;
  }

  .el-checkbox-group {
    margin: 20px 0 30px;
  }

</style>
